import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider, createBrowserRouter, Link, Outlet } from 'react-router-dom';
import { Register } from './page/register/Register';
import { Login } from './page/login/Login';
import { UpdatePassword } from './page/update_password/UpdatePassword';
import { ErrorPage } from './page/error/ErrorPage';
import { Index } from './page/index';
import { UpdateInfo } from './page/update_info/UpdateInfo';
import { Menu } from './page/menu/Menu';
import { MeetingRoomList } from './page/meeting_room_list/MeetingRoomList';
import { BookingHistory } from './page/booking_history/BookingHistory';
import {lazy, Suspense} from 'react';
import { ConfigProvider,Spin } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

const lazyLoad = (factory: () => Promise<any>) => {
  const Module = lazy(factory)
  return (
    <Suspense fallback={<Spin size="large" style={{display: 'flex', justifyContent:'center', alignItems: 'center', width: '100vw',height: '100vh'}}/>}>
      <Module />
    </Suspense>
  )
}
const routes = [
  {
    path: "/",
    element: <Index></Index>,
    errorElement: <ErrorPage />,
    children: [
      {
        path: 'update_info',
        // element: <UpdateInfo/>,
        element: lazyLoad(() => import('./page/update_info/UpdateInfo')),
      },
      {
        path: '/',
        element: <Menu/>,
        children: [
          {
            path: '/',
            // element: <MeetingRoomList/>
            element: lazyLoad(() => import('./page/meeting_room_list/MeetingRoomList')),
          },
          {
            path: 'meeting_room_list',
            // element: <MeetingRoomList/>,
            element: lazyLoad(() => import('./page/meeting_room_list/MeetingRoomList')),
          },
          {
            path: 'booking_history',
            // element: <BookingHistory/>,
            element: lazyLoad(() => import('./page/booking_history/BookingHistory')),
          }
        ]
      }
    ]
  },
  {
    path: "login",
    element:lazyLoad(() => import('./page/login/Login')),
  },
  {
    path: "register",
    // element: <Register />,
    element: lazyLoad(() => import('./page/register/Register')),
  },
  {
    path: "update_password",
    // element: <UpdatePassword />,
    element: lazyLoad(() => import('./page/update_password/UpdatePassword')),
  }
];
//判断是开发环境还是生产环境
const isProduction = process.env.NODE_ENV === 'production';
const basename = isProduction ? "/user-meeting/" : "/";
export const router = createBrowserRouter(routes,{basename});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const App = <ConfigProvider locale={zhCN}>
  <RouterProvider router={router}/>
</ConfigProvider>

root.render(App);